<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			div#cirle{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				border-radius: 400px;
				/* 边框阴影 box-shadow 属性  */
				box-shadow: 5px 5px 5px 5px red;
			}
			div#triangle {
				width: 0;
				border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-top: 50px solid black;
				/* 倒三角 两行 蓝色 透明度 .3 */
			}
			div#d3{
				width: 0;
				border: 50px solid transparent;
				border-top-color: rgba(0, 0, 255, .3);
			}
			/* outline 边框轮廓 只针对input元素*/
			input{
				outline: 1px solid red;
			}
			/* 实际应用 ： 通配选择器 去掉轮廓 */
			*{outline: 0;}
		</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle"></div>
		<div id="d3"></div>
		边框 : <input type="text" />
	</body>
</html>